<template>
    <div class="header" :style="headercolor">

        <div class="rightBox" :style="headercolor">
            <el-breadcrumb class="tabnav">
                <!-- @click.native="updateParentVariable" -->
                <el-breadcrumb-item>首页</el-breadcrumb-item>
                <el-breadcrumb-item>{{ tabText }}</el-breadcrumb-item>
            </el-breadcrumb>
            <el-dropdown style="margin-right: 30px;" @command="handleCommand">
                <span class="el-dropdown-link user el-icon-user-solid">
                    {{ userData.name }}
                    <i class="el-icon-arrow-down el-icon--right"></i>
                </span>
                <el-dropdown-menu slot="dropdown">
                    <el-dropdown-item command="a">个人中心</el-dropdown-item>
                    <el-dropdown-item command="e">退出登录</el-dropdown-item>
                </el-dropdown-menu>
            </el-dropdown>
        </div>
    </div>
</template>

<script>
import { logOutAndLogIn } from "@/utils/api";
export default {
    name: 'headerInfo',
    data() {
        return {
            headercolor: 'background-color: #fff',
            dialogVisible: false,
            tabText: ''
        };
    },
    props: {
        userData: {
            required: true
        },
        navId: {
            required: true
        }
    },
    watch: {
        navId: function (newNavId, oldNavId) {
            console.log('header:', newNavId);
            // 在这里处理 navId 的变化
            console.log('navId 变化了:', newNavId, oldNavId);
            switch (newNavId) {
                // case 'home':
                //     this.tabText = '工作台'
                //     break;
                case '1-7':
                    this.tabText = 'AMO联盟'
                    break;
                case '2-8':
                    this.tabText = '首次公开发行沟通方案'
                    break;
                case '2-9':
                    this.tabText = '国际路演'
                    break;
                case '2-10':
                    this.tabText = '财经印刷服务'
                    break;
                case '2-11':
                    this.tabText = '投资者关系'
                    break;
                case '2-12':
                    this.tabText = '媒体关系'
                    break;
                case '2-13':
                    this.tabText = '大型活动策划管理'
                    break;
                case '2-14':
                    this.tabText = '危机管理'
                    break;
                case '2-15':
                    this.tabText = '并购顾问服务'
                    break;
                case '2-16':
                    this.tabText = '企业品牌形象策划'
                    break;

                case '2-17':
                    this.tabText = '广告策划'
                    break;
                case '3-18':
                    this.tabText = '我们的客户'
                    break;
                case '4-19':
                    this.tabText = '最新消息'
                    break;
                case '5-20':
                    this.tabText = '事业发展'
                    break;
                case '5-21':
                    this.tabText = '加入我们'
                    break;
                case '6-22':
                    this.tabText = '联络我们'
                    break;
                case '888-999':
                    this.tabText = '首页轮播'
                    break;
                default:
                    break;
            }
        }
    },
    mounted() {
        console.log(this.userData, 'userData');
    },

    methods: {
        handleCommand(command) {
            console.log(command);

            switch (command) {
                case 'e':
                    if (confirm('确认退出登录？')) {
                        localStorage.removeItem('token')
                        localStorage.removeItem('user')
                        this.outlogin()
                        this.$router.push('/Login')
                    }
                    break;
                case 'a':
                    this.$message.success('个人中心')
                    break;

                default:
                    break;
            }
        },
        updateParentVariable() {
            this.$emit('updateParentVariableEvent');
        },
        async outlogin() {
            const res = await logOutAndLogIn().catch((err) => {
                return console.error(err);
            });
            if (res.data.code == '200') {
                this.$message.success(res.data.msg)
            }
        }
    },
};
</script>

<style lang="less" scoped>
.header {

    height: 40px;

    .rightBox {
        // line-height: 58px;
        display: flex;
        justify-content: end;
        position: relative;

        .tabnav {
            position: absolute;
            left: 20px;
            line-height: 40px;
            font-size: 12px;
            font-weight: 700;
        }

        .user {
            font-size: 14px;
            color: coral;
            cursor: pointer;
            height: 35px;
            line-height: 35px;
            // margin-right: 5%;
        }

        .offbtn {
            margin-right: 1%;
        }

        .user:hover {
            color: #007acc;
        }
    }

}

@media (max-width:768px) {}

.el-dropdown-link {
    cursor: pointer;
    color: #409EFF;
}

.el-icon-arrow-down {
    font-size: 12px;
}
</style>